<template>
  <div>
    <!-- 添加路线 -->
    <div v-show="show">
      <el-input style="width:18%" placeholder="请输入线路名称" v-model="DataInfo.name"></el-input>
      <el-input style="width:18%" placeholder="请输入途径" v-model="DataInfo.road"></el-input>
      <el-input style="width:18%" placeholder="请输入地址" v-model="DataInfo.address"></el-input>
      <el-input style="width:18%" placeholder="请输入电话" v-model="DataInfo.phone"></el-input>
    </div>
    <div style="float: left; width: 15%; margin-left: 10px;">
      <el-button  type="primary" @click="add()">添加线路</el-button>
    </div>
    <div>
      <!-- 搜索 -->
      <el-input size="mini" placeholder="输入关键字搜索" style="width: 200px;,height: 80px;" v-model="select" />
      <el-button @click="serach()" style=" margin: 10px;" type="primary">搜索</el-button>
    </div>
    <!-- 显示 -->
    <el-table style="width: 100%" :data="
      // 查询操作
      isselect
        ? selectData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))
        // 置顶操作
        : isup
          ? upData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))
          : pageData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))
    ">
      <el-table-column label="线路名称" prop="线路名称"></el-table-column>
      <el-table-column label="途径" prop="途径"></el-table-column>
      <el-table-column label="地址" prop="地址"></el-table-column>
      <el-table-column label="电话" prop="电话"></el-table-column>
      <el-table-column label="操作">
        <!-- 操作 -->
        <template slot-scope="scope">
          <el-button size="mini" @click="up(scope.$index)">置顶</el-button>
          <el-button size="mini" @click="Edit(scope.row)" type="primary">编辑</el-button>
          <el-button size="mini" @click="del(scope.$index)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑 -->
    <div v-show="ifshow">
      线路名称<el-input v-model="dataEdit1.name" style="width: 20%;"></el-input>
      途径<el-input v-model="dataEdit1.road" style="width: 20%;"></el-input>
      地址<el-input v-model="dataEdit1.address" style="width: 20%;"></el-input>
      电话<el-input v-model="dataEdit1.phone" style="width: 20%;"></el-input>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination 
      background 
      layout="prev, pager, next" 
      @current-change="currentPage" 
      :total="totalPage">
      </el-pagination>
    </div>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      tableData: [],//全部数据
      selectData: [],//查询数据
      upData: [],//置顶数据
      pageData: [],//当前页码表格数据
      dataEdit1: {
        name: '',
        road: '',
        address: '',
        phone: '',
      },
      DataInfo: {
        name: '',
        phone: '',
        road: '',
        address: ''
      },
      search: "",
      ifshow: false,
      show: false,
      isselect: false,
      isup: false,
      select: "",pageNo: 1,//表格页码
      pageCount: 5,//数据数
      currentNo: 1,//当前页码
      totalPage: 1,//总页码
    }
  },
  methods: {
    // 分页
    // 删
    async del(index) {
      console.log(index);
      console.log(this.tableData);
      await this.$axios.post('http://localhost:3000/delpoint', {
        name: this.tableData[index].name,
        id: this.tableData[index].id
      }
      )
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.log('操作失败' + err);
        })
    },
    // 改
    async Edit(row) {
      this.ifshow = !this.ifshow
      console.log(this.ifshow);
      console.log(row);
      this.dataEdit1 = row
      console.log(this.dataEdit1);
      if (this.ifshow == false) {
        await this.$axios.post('http://localhost:3000/eidtpoint',
          {
            name: this.dataEdit1.name,
            road: this.dataEdit1.road,
            phone: this.dataEdit1.phone,
            address: this.dataEdit1.address,
            id: this.dataEdit1.id
          })
          .then(res => {
            console.log(res.data);
            if (res.data.code == 200) {
              alert('修改成功')
            }
            if (res.data.code == 400) {
              alert('修改失败')
            }
          })
          .catch(err => {
            console.log('操作失败' + err);
          })
      }

    },
    // 查
    async serach() {
      this.isselect = !this.isselect
      await this.$axios.post('http://localhost:3000/selpoint', { name: this.select })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.selectData = res.data.List
          }
          if (res.data.code == 400) {
            this.selectData = res.data.List
          }
        })
        .catch(err => {
          console.log('操作失败' + err);
        })
    },
    // 置顶
    async up(index) {
      this.isup = !this.isup;
      await this.$axios.post('http://localhost:3000/uppoint',
        {
          id: this.tableData[index].id
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code = 200) {
            this.upData = res.data.List
          } else {
            alert("置顶失败")
          }

        })
        .catch(err => {
          console.log('操作失败' + err);
        })
    },
    // 加
    async add() {
      this.show = !this.show;
      await this.$axios.post('http://localhost:3000/addpoint',
        {
          name: this.DataInfo.name,
          road: this.DataInfo.road,
          phone: this.DataInfo.phone,
          address: this.DataInfo.address,
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            alert('添加成功')
          }
          if (res.data.code == 400) {
            alert('线路已存在')
          }
        })
        .catch(err => {
          console.log('操作失败' + err);
        })
    },
    // 显示路线
    // async putpoint() {
    //   let result = await this.$axios.post("/putpoint");
    //   this.tableData = result.data.List
    // },
    // 分页
    //获取前5条数据
    async getData(index) {
      this.pageNo = index || this.pageNo
      await this.$axios.post('http://localhost:3000/pointpage',
        {
          page: this.pageNo,
          pageSize: this.pageCount
        }).then(res => {
          // console.log(res);
          if (res.data.code = 200) {
            // console.log(1);
            console.log(res.data);
            // alert("获取分页数据成功")
            this.pageData = res.data.List
          }else{
            // alert("获取分页数据失败")
          }

        }).catch(error => {
          console.log(error);
        })
      },
      //当前页数据
    currentPage(val) {
      this.currentNo = val;
      // console.log(this.currentNo)
      this.getData(this.currentNo)
    },
    //获取总页数
    async getPageTotal() {
      await this.$axios.post("/putuser")
        .then(res => {
          // console.log(res.data.List);
          this.tableData = res.data.List;
          this.totalPage = Math.ceil(this.tableData.length / this.pageCount) * 10;
          // console.log(this.totalPage);
        }).catch(error => {
          console.log(error)
        })
    }
  },
  mounted() {
    this.getData();
    this.getPageTotal();
  }
}
</script>
  
  